<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./css/player.css">
    <link rel="stylesheet" href="./css/font-awesome/css/font-awesome.min.css">
    <style>
        .play-div-none {
            display: none;
        }

        .red {
            color: red;
        }
    </style>
    <script src="./js/utils.js"></script>
</head>

<body>
    <div class="wrapper">

    </div>
    <div class="player__container">
        <div class="player__body">
            <div class="body__cover">
                <ul class="list list--cover">
                    <!-- 顶部图标 -->
                    <li id="li-list-menu">
                        <a class="list__link" href=""><i class="fa fa-navicon"></i></a>
                    </li>
                    <li>
                        <a class="list__link" href=""></a>
                    </li>
                    <li id="li-list-search">
                        <a class="list__link" href=""><i class="fa fa-search"></i></a>
                    </li>
                </ul>
                <img src="./img/white.jpg" alt="Album cover" />
            </div>

            <div class="body__info">
                <div id="id-song-name" class="info__song">Final Masquerade</div>
            </div>

            <div class="body__buttons">
                <ul class="list list--buttons">
                    <li id="id-btn-previous">
                        <a href="#" class="list__link">
                            <i class="fa fa-step-backward"></i>
                        </a>
                    </li>
                    <li id="id-btn-play" class="status">
                        <a href="#" class="list__link ">
                            <i id="id-play-pause" class="fa fa-play"></i>
                        </a>
                    </li>
                    <li id="id-btn-next">
                        <a href="#" class="list__link">
                            <i class="fa fa-step-forward"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="player__footer">
            <ul class="list list--footer">
                <li id="id-footer-like">
                    <a href="#" class="list__link"><i class="fa fa-heart-o"></i></a>
                </li>
                <li id="id-footer-random">
                    <a href="#" class="list__link">
                        <i class="fa fa-random"></i>
                    </a>
                </li>
                <li id="id-footer-single" class="id-footer-single-undo">
                    <a href="#" class="list__link">
                        <i class="fa fa-undo"></i>
                    </a>
                </li>
                <li id="li-footer-more">
                    <a href="#" class="list__link"><i class="fa fa-ellipsis-h"></i></a>
                </li>
            </ul>
        </div>
    </div>

    <audio id="id-audio-player" src="./audio/3.mp3" class="list"></audio>

    <div class="play-div-none">
        <ul>
            <li class="list-song" data-path="1.mp3">钢琴曲.mp3</li>
            <li class="list-song" data-path="2.mp3">悠扬曲.mp3</li>
            <li class="list-song" data-path="3.mp3">打击乐.mp3</li>
        </ul>
    </div>
    <script src="./js/play.js"></script>
</body>

</html>